<template>
  <div>
    <ACard>
      <template #title>
        <div class="erp-row-center-between">
          <div>
            <span>收支情况</span>
          </div>
          <div>
            <ARangePicker
              v-model="SearchFrom.TotalTime"
              mode="month"
              :allow-clear="false"
              :placeholder="['汇总时间-开始', '汇总时间-结束']"
              size="small"
              :disabled-date="(current) => dayjs(current).isAfter(dayjs())"
              @change="getIncomeExpenditureData"
            ></ARangePicker>
            <AButton
              size="small"
              type="primary"
              class="erp-ml-6"
              :loading="ExportLoading"
              @click="onExport"
            >
              导出
            </AButton>
          </div>
        </div>
      </template>
      <ATable
        ref="defineTableRef"
        :data="TableData"
        :bordered="{ cell: true }"
        column-resizable
        :scroll="{ maxHeight: 300 }"
        row-key="seq"
        :hide-expand-button-on-empty="true"
        :pagination="false"
      >
        <template #columns>
          <ATableColumn title="序号" data-index="seq" :width="100">
            <template #cell="{ record }">
              {{ record.seq }}
            </template>
          </ATableColumn>
          <ATableColumn title="名称" data-index="itemName" :width="100">
            <template #cell="{ record }">
              {{ record.itemName }}
            </template>
          </ATableColumn>
          <ATableColumn title="总金额" data-index="amt" :width="100">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.amt)}` }}
            </template>
          </ATableColumn>
        </template>
      </ATable>
    </ACard>
  </div>
</template>

<script lang="ts" setup>
import { formatPrice } from '@renderer/utils/mixins'
import {
  IncomeExpenditureRes,
  IncomeExpenditureSearch,
  getIncomeExpenditure
} from '@renderer/api/financialStatement'
import dayjs from 'dayjs'
import { TableInstance } from '@arco-design/web-vue'

const SearchFrom = ref<IncomeExpenditureSearch>({
  TotalTime: [dayjs().startOf('year').format('YYYY-MM'), dayjs().format('YYYY-MM')],
  startDate: dayjs().startOf('year').format('YYYY-MM-01'),
  endDate: dayjs().endOf('year').format('YYYY-MM-DD')
})
const TableData = ref<IncomeExpenditureRes[]>([])
const ExportLoading = ref(false)
const defineTableRef = ref<TableInstance>()

function getIncomeExpenditureData() {
  const [startDate, endDate] = SearchFrom.value.TotalTime || []
  SearchFrom.value.startDate = startDate ? dayjs(startDate).format('YYYY-MM-01') : ''
  SearchFrom.value.endDate = endDate ? dayjs(endDate).endOf('M').format('YYYY-MM-DD') : ''
  getIncomeExpenditure(SearchFrom.value).then((res) => {
    TableData.value = res.data.list
    nextTick(() => {
      defineTableRef.value?.expandAll(true)
    })
  })
}

async function onExport() {
  ExportLoading.value = true
  const fileTitle = '收支情况数据'
  const headerData = [
    { title: '序号', value: 'index', width: 80 },
    { title: '客户名称', value: 'Code', width: 180 },
    { title: '总金额', value: 'SalesOrderCode', width: 180 }
  ]
  let excelData: IncomeExpenditureRes[] = []
  const res = await getIncomeExpenditure(SearchFrom.value)
  excelData = res.data.list.map((item, index) => {
    item.index = index + 1
    return item
  })
  import('@renderer/utils/vendor')
    .then((excel) => {
      excel.exportExcel(excelData, headerData, fileTitle)
    })
    .finally(() => {
      ExportLoading.value = false
    })
}

onMounted(() => {
  getIncomeExpenditureData()
})
</script>
<style scoped></style>
